@import '~@reach/listbox/styles.css';

.version-context-dropdown {
    width: max-content;

    &__button {
        display: flex;
        border-radius: 0;
        border-left: 1px solid $gray-17 !important;

        &-text {
            font-size: 10px;
        }
    }

    &__title {
        font-weight: bold;
        display: flex;
        justify-content: space-between;
    }

    &__info {
        padding: 0.5rem 0.5rem;
        font-size: 12px;
        border: none;

        &-dismiss {
            width: fit-content;
            float: right;
            align-self: flex-end;
        }
    }

    &__popover {
        padding: 0.5rem;
        color: var(--link-color);
        min-width: 30rem;
        max-width: 30rem;
        min-height: fit-content;
        max-height: 20rem;
        overflow-y: auto;
    }

    &__option {
        font-size: 12px;
        display: grid;
        grid-template-columns: 0.5fr 4fr 5fr 0.5fr;
        cursor: pointer;

        &-name {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &-description {
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    &__list {
        padding-left: 0;

        [data-reach-listbox-option][data-current] {
            /* styles for the option matching the current value of the input */
            font-weight: normal;
            background-color: $color-bg-3;
        }

        [data-reach-listbox-option][aria-selected='true'] {
            /* styles for the option matching the user's navigation selection */
            color: inherit;
            background-color: $color-bg-2;
        }
    }
}

.theme-light {
    .version-context-dropdown {
        &__info {
            background-color: $color-light-bg-2;
        }

        &__button {
            border-left: 1px solid $gray-07 !important;
        }

        &__list {
            [data-reach-listbox-option][data-current] {
                /* styles for the option matching the current value of the input */
                font-weight: normal;
                background-color: $color-light-bg-4;
            }
            [data-reach-listbox-option][aria-selected='true'] {
                /* styles for the option matching the user's navigation selection */
                color: inherit;
                background-color: $color-light-bg-2;
            }
        }
    }
}
